/**
 * @author lulongwen
 * Date: 2023-09-13 23:00
 * Description: GroupNode 分组
 * type: 'group' 要在子节点之前
 * extent: 'parent', 局限在父节点内，去掉这个属性，可以自由拖动
 * parentNode: '2', 拖拽时子节点一起移动
 */

import { useCallback } from 'react';
import ReactFlow, {
  addEdge,
  Background,
  useNodesState,
  useEdgesState,
  MiniMap,
  Controls,
} from 'reactflow';
import type { Connection } from 'reactflow';

import { initialNodes, initialEdges } from './nodes-edges';


const GroupNode = () => {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback((connection: Connection) => {
    setEdges((eds) => addEdge(connection, eds));
  }, []);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      className="react-flow-subflows-example"
      fitView
    >
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
};

export default GroupNode;
